<template>
	<view>
		<view>
			<view class="" style="display: flex; margin-top: 40rpx; padding: 40rpx 60rpx">
				<view class="">
					<image style="width: 200rpx; height: 250rpx;" @click="clickImg(studentInfo.stuPhoto)"
						:src="studentInfo.stuPhoto ?studentInfo.stuPhoto:'https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/boy.png'"
						mode=""></image>
				</view>
				<view style="margin-left: 80rpx;display: flex; flex-direction: column; justify-content: space-around;">
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">宿舍号：</view>
						<view class="character">{{studentInfo.dormitoryName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">姓名：</view>
						<view class="character">{{studentInfo.studentName}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">性别：</view>
						<view class="character">{{studentInfo.sex == 0 ?"男" :"女"}}</view>
					</view>
					<view style="display: flex; width: 400rpx; margin-top: 8rpx;">
						<view class="character">班级：</view>
						<view class="character">{{studentInfo.className}}</view>
					</view>

					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任：</view>
						<view class="character">{{studentInfo.teacherName}}</view>
					</view>
					<view style="display: flex; margin-top: 8rpx;">
						<view class="character">班主任电话：</view>
						<view class="character">{{studentInfo.teacherPhone}}</view>
					</view>
				</view>
			</view>



			<!-- 头部 -->
			<view class="" style="display: flex; align-items: center; padding: 20rpx 30rpx 40rpx 30rpx">
				<image src="../../../static/pic/tixinglanse.png" style="width: 80rpx; height: 80rpx;" mode=""></image>
				<view class="" style="font-size: 36rpx; font-weight: 700;">处理记录</view>
			</view>
			<!-- 头部 -->
			<!--  -->
			<view class="" style="padding: 0 40rpx;" v-for="(item,index) in recordList" :key="index">
				<view class="" style="display: flex; align-items: center; justify-content: space-between;">
					<view class="" style="display: flex; align-items: center;">
						<image src="../../../static/pic/xiaobiaoti.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
						<view class="" style="margin-left: 30rpx;">{{item.createTime}}</view>
					</view>
					<view class="" v-if="item.type == 2"
						style="border: 1rpx solid green; padding: 5rpx 10rpx; border-radius: 10rpx;">已提交
					</view>
					<view class="" v-if="item.type == 4 || item.type == 7"
						style="border: 1rpx solid green; padding: 5rpx 10rpx; border-radius: 10rpx;">已完成
					</view>
				</view>
				<view style="border-left: 1rpx solid #aaa; padding: 20rpx 0 20rpx 45rpx; margin-left: 25rpx;"
					:class="(index == recordList.length -1) ? 'lastBox' : ''">
					<view style="border: 1rpx solid #aaa; border-radius: 10rpx; padding:0 20rpx 28rpx 20rpx;">
						<uni-section v-if="item.type == 2" class="mb-10" title="提交班主任处理" type="line">
							<template v-slot:right>提交人：{{item.createBy}}</template>
							<view style="padding: 0 35rpx;">{{item.result}}</view>
						</uni-section>
						<uni-section v-if="item.type == 4 || item.type == 7" class="mb-10" title="班主任处理结果" type="line">
							<template v-slot:right>提交人：{{item.createBy}}</template>
							<view style="padding: 0 35rpx;">{{item.result}}</view>
						</uni-section>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import taskNotReturned from "@/api/modules/taskNotReturned.js"
	import managementTeacher from "@/api/modules/managementTeacher.js"
	import teacherClass from "@/api/modules/teachClass.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				bzrUrl: "",
				topName: "请假",
				userName: "",
				studentInfo: {},
				notReturnedDate: "",
				reason: "",
				buildNo: "",
				date: "",
				processContent: "",
				recordList: [{
					result: "",
				}],
				studentId: "",
				flag: "",
				applyDesc: "",
				formData: {},
				count: 0,
				imageValue: [],
				mendCardPhoto: "",
				createSubmitType: "",
				checkShow: true,
				handleShow: true,
				id: "",
				type: "",
				reason: "",
				handleTwoShow: true,
			}
		},
		methods: {
			changeHandleShowTwo() {
				this.handleTwoShow = !this.handleTwoShow
			},
			changeHandleShow() {
				this.handleShow = !this.handleShow
			},
			getRecords(date, id) {
				managementTeacher.getTrackRecordByDateAndStuId(date, id).then(res => {
					this.recordList = res.data
					this.recordList.forEach(item => {
						item.createTime = parseTime(new Date(item.createTime).getTime())
						console.log(item.createTime)
					})
					console.log(this.recordList)
				})
			},
		},
		onLoad(options) {
			console.log(options.accessDate)
			this.bzrUrl =
				`/pages_main/managementTeacher/allTypeUnStudentList/allTypeUnStudentList?buildNo=${options.buildNo}&date=${options.searchDate}&current=${options.current}&storey=${options.storey}&attenceStatus=${options.attenceStatus}`
			this.userName = uni.getStorageSync("userName")
			this.studentId = options.studentId
			this.reason = options.reason
			this.notReturnedDate = options.accessDate.slice(0, 10)
			this.id = options.id
			taskNotReturned.getStudentById(this.studentId).then(res => {
				this.studentInfo = res.data
			})
			this.getRecords(options.searchDate, this.studentId)
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;

	}

	.character {
		/* width: 150rpx; */
		font-size: 26rpx;
		/* color: #979999; */
		color: #444;
	}

	.card {
		width: 86%;
		/* border: 1rpx #000 solid; */
		padding: 20rpx 10rpx 20rpx 10rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}

	.ftColor {
		color: #3333d3;
	}

	.cancel {
		/* width: 35%; */
		background-color: #a0a0a0;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.tijiao {
		margin: 20rpx auto 0;
		width: 520rpx;
		background-color: #3333d3;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}

	.lastBox {
		height: 20rpx;
	}
</style>